<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS DOM</title>
</head>

<body>
    <div id="box1">这是一个ID选择器标签</div>
    <div class="box2">这是一个类选择器标签</div>
    <div>这是一个普通的div标签</div>
    
    <button>点击按钮</button>

    <script>
        var element_id=document.getElementById('box1');
        console.log(element_id);
        var element_class=document.getElementsByClassName('box2')[0];
        console.log(element_class);
        var element_tag=document.getElementsByTagName('div')[2];
        console.log(element_tag);
        
        //可以修改标签内容
        element_id.innerHTML='<a href="#">跳转链接</a>';
        element_class.innerText='<a href="#">跳转链接</a>';

        //可以修改标签属性
        element_tag.style.color='red';
        element_tag.style.fontSize='20px';

        //绑定事件
        var button_element=document.getElementsByTagName('button')[0];
        console.log(button_element);//确认获取到了按钮，可写可不写
        //方法一
        // button_element.onclick=function() 
        // {
        //     alert('DOM 属性 按键触发');   
        // }
        //方法二
        // button_element.addEventListener('click',function () //匿名函数
        // {
        //  alert('通过 addEventListener 触发警报')   
        // })
        button_element.addEventListener('click',click_event);
        function click_event() 
        {
            alert('通过 addEventListener 触发警报');
            
        }
        
    </script>
</body>
</html>